<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-tickets"></i> 首页信息管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
                <div class="form-box">
                        <el-form ref="form" :model="form" label-width="120px">
                            <el-form-item label="About文案:">
                                <el-input   type="textarea" rows="5"  v-if="editVisible" v-model="form.about"></el-input>
                                <p  v-if="!editVisible">{{form.about||"暂无"}}</p>
                            </el-form-item>
                            <el-form-item label="Banner图片:">
                                    <img v-if="!editVisible"  :src="form.banner"  class="pre-img"/>
                                <div v-if="editVisible" class="crop-demo">
                                        <img :src="banner"   class="pre-img"/>
                                        <div class="crop-demo-btn">选择图片
                                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage1"/>
                                        </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="测试区图片:">
                                    <img v-if="!editVisible"  :src="form.test_img"  class="pre-img"/>
                                <div v-if="editVisible" class="crop-demo">
                                        <img :src="test_img"   class="pre-img"/>
                                        <div class="crop-demo-btn">选择图片
                                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage2"/>
                                        </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="测试区文案:">
                                    <el-input   type="textarea" rows="5"  v-if="editVisible" v-model="form.test"></el-input>
                                    <p  v-if="!editVisible">{{form.test||"暂无"}}</p>
                                </el-form-item>
                            <el-form-item label="写信屋图片:">
                                    <img v-if="!editVisible"  :src="form.letter_img"  class="pre-img"/>
                                <div v-if="editVisible" class="crop-demo">
                                        <img :src="letter_img"   class="pre-img"/>
                                        <div class="crop-demo-btn">选择图片
                                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage3"/>
                                        </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="写信屋文案:">
                                    <el-input   type="textarea" rows="5"  v-if="editVisible" v-model="form.letter"></el-input>
                                    <p  v-if="!editVisible">{{form.letter||"暂无"}}</p>
                                </el-form-item>
                            <el-form-item label="留言墙图片:">
                                    <img v-if="!editVisible"  :src="form.message_img"  class="pre-img"/>
                                <div v-if="editVisible" class="crop-demo">
                                        <img :src="message_img"   class="pre-img"/>
                                        <div class="crop-demo-btn">选择图片
                                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage4"/>
                                        </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="留言墙文案:">
                                    <el-input   type="textarea" rows="5"  v-if="editVisible" v-model="form.message"></el-input>
                                    <p  v-if="!editVisible">{{form.message||"暂无"}}</p>
                                </el-form-item>
                            <el-form-item label="故事板图片:">
                                    <img v-if="!editVisible"  :src="form.story_img"  class="pre-img"/>
                                <div v-if="editVisible" class="crop-demo">
                                        <img :src="story_img"   class="pre-img"/>
                                        <div class="crop-demo-btn">选择图片
                                            <input class="crop-input" type="file" name="image" accept="image/*" @change="setImage5"/>
                                        </div>
                                </div>
                            </el-form-item>
                            <el-form-item label="故事板文案:">
                                    <el-input   type="textarea" rows="5"  v-if="editVisible" v-model="form.story"></el-input>
                                    <p  v-if="!editVisible">{{form.story||"暂无"}}</p>
                                </el-form-item>
                            <el-form-item>
                                <el-button type="primary" v-if="editVisible" @click="handleEdit">修改</el-button>
                                <el-button v-show="editVisible"  @click="reset">取消</el-button>
                                <el-button v-show="!editVisible" @click="edit">修改</el-button>
                            </el-form-item>
                        </el-form>
                    </div>
           
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                url: '/api/gethome',
                tableData: [],
                editVisible: false,
                delVisible: false,
                form: {},
                banner:"",
                test_img:"",
                letter_img:"",
                message_img:"",
                story_img:"",
                bac_form:{}
            }
        },
        created() {
            this.getData();
        },
        computed: {
            data() {
                return this.tableData
            }
        },
        methods: {
            // 分页导航
            setImage1(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                let formData = new FormData();
                formData.append('file', file);
                let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
                }
                this.$axios.post('./api/file', formData, config).then((res)=> {
                    
                        this.banner=res.data;
                })
               
            },
            setImage2(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                let formData = new FormData();
                formData.append('file', file);
                let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
                }
                this.$axios.post('./api/file', formData, config).then((res)=> {
                    
                        this.test_img=res.data;
                })
            },
            setImage3(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                let formData = new FormData();
                formData.append('file', file);
                let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
                }
                this.$axios.post('./api/file', formData, config).then((res)=> {
                    
                        this.letter_img=res.data;
                })
              
               
            },
            setImage4(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                let formData = new FormData();
                formData.append('file', file);
                let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
                }
                this.$axios.post('./api/file', formData, config).then((res)=> {
                    
                        this.message_img=res.data;
                })
            },
            setImage5(e){
                const file = e.target.files[0];
                if (!file.type.includes('image/')) {
                    return;
                }
                let formData = new FormData();
                formData.append('file', file);
                let config = {
                headers: {
                    'Content-Type': 'multipart/form-data'
                }
                }
                this.$axios.post('./api/file', formData, config).then((res)=> {
                    
                        this.story_img=res.data;
                })
               
            },
            edit(){
                this.editVisible=true
                this.banner =this.form["banner"]
                this.test_img=this.form["test_img"]
                this.letter_img=this.form["letter_img"]
                this.message_img=this.form["message_img"]
                this.story_img=this.form["story_img"]
                Object.keys(this.form).forEach(key=>{
                    this.bac_form[key]=this.form[key]
                })
                
                console.log(this.bac_form);
                
            },
            reset(){
                this.editVisible=false
                console.log(this.bac_form);
                Object.keys(this.bac_form).forEach(key=>{
                    this.form[key]=this.bac_form[key]
                })
               
            },
            getData() {
                this.$axios.post(this.url, {
                }).then((res) => {
                    console.log(res.data);
                    this.form=res.data
                })
            },
            handleEdit() {
                this.editVisible=false
                this.form["banner"]=this.banner
                this.form["test_img"]=this.test_img
                this.form["letter_img"]=this.letter_img
                this.form["message_img"]=this.message_img
                this.form["story_img"]=this.story_img
                console.log(this.form);
                this.$axios.post("api/savehome", {
                    ...this.form
                }).then((res) => {s
                    this.form=res.data
                })
            },
        }
    }

</script>

<style scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 300px;
        display: inline-block;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
<style scoped>
        .content-title{
            font-weight: 400;
            line-height: 50px;
            margin: 10px 0;
            font-size: 22px;
            color: #1f2f3d;
        }
        .pre-img{   
            width: 100px;
            height: 100px;
            background: #f8f8f8;
            border: 1px solid #eee;
            border-radius: 5px;
        }
        .crop-demo{
            display: flex;
            align-items: flex-end;
        }
        .crop-demo-btn{
            position: relative;
            width: 100px;
            height: 40px;
            line-height: 40px;
            padding: 0 20px;
            margin-left: 30px;
            background-color: #409eff;
            color: #fff;
            font-size: 14px;
            border-radius: 4px;
            box-sizing: border-box;
        }
        .crop-input{
            position: absolute;
            width: 100px;
            height: 40px;
            left: 0;
            top: 0;
            opacity: 0;
            cursor: pointer;
        }
    </style>